import React from 'react';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Card, Button, Spin } from 'antd';
import { connect } from 'dva';
import router from 'umi/router';
import queryString from 'query-string';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import FooterToolbar from '@/components/FooterToolbar';
import DescriptionList from '@/components/DescriptionList';

// const FormItem = Form.Item;
const { Description } = DescriptionList;
@connect(({ usermanage, loading }) => ({
  usermanage,
  loading: loading.models.usermanage,
}))
@Form.create()
class Detail extends React.Component {
  state = {};

  componentDidMount() {
    const { location, dispatch } = this.props;
    const { userId } = queryString.parse(location.search);
    dispatch({
      type: 'usermanage/fetchDetailInfo',
      payload: {
        userId,
      },
    });
  }

  componentWillUnmount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'usermanage/updateModalData',
      payload: {
        assoUserFlag: null,
        assoCustsFlag: null,
      },
    });
  }

  submitback = () => {
    router.push('/systemmanage/user/index');
  };

  render() {
    const {
      loading,
      usermanage: { detailInfo, assoUserFlag, assoCustsFlag },
    } = this.props;
    return (
      <PageHeaderWrapper>
        <Card title="查看员工信息">
          <Spin spinning={loading}>
            <DescriptionList>
              <Description term="姓名 ">{detailInfo.userName || '--'}</Description>
              <Description term="身份证号">{detailInfo.userIdCard || '--'}</Description>
              <Description term="手机号">{detailInfo.mobile || '--'}</Description>
              <Description term="邮箱">{detailInfo.email || '--'}</Description>
              <Description term="用户登录名">{detailInfo.loginName || '--'}</Description>
              <Description term="所属公司">{detailInfo.corpName || '--'}</Description>
              <Description term="所属部门">{detailInfo.orgList || '--'}</Description>
              <Description term="岗位">{detailInfo.postTypeName || '--'}</Description>
              {assoUserFlag && (
                <Description term="所属用户">{detailInfo.assoUserName || '--'}</Description>
              )}
              {assoCustsFlag && (
                <Description term="关联客户">{detailInfo.assoCustsName || '--'}</Description>
              )}
              <Description term="角色">{detailInfo.roles || '--'}</Description>
              <Description term="备注">{detailInfo.remark || '--'}</Description>
            </DescriptionList>
          </Spin>
        </Card>
        <FooterToolbar>
          <Button onClick={this.submitback}>返回</Button>
        </FooterToolbar>
      </PageHeaderWrapper>
    );
  }
}
export default Detail;
